<template>
    <div>
        <div class="loginArea" @click="isOpenLogin=true" v-if="!isLogin">
            <van-icon name="user-circle-o" size="3rem" color="whitesmoke" class="loginAvatar"/>
            <div>登录/注册</div>
        </div>
        <div class="loginArea" v-if="isLogin">
            <div class="avatar" >{{user.name.slice(0,3)}}</div>
                <van-button
                        @click="logout"
                        class="logout margin-left"
                        plain hairline
                        type="danger"
                >退出登录
                </van-button>
        </div>
        <div class="orderArea">
            <div class="myOrder border-bottom" @click="goOrder">
                <div class="LeftTitle">我的订单</div>
                <div class="RightTitle">全部订单<van-icon name="arrow" size="1.5rem" color="#b1b1b1"/></div>
            </div>
            <div class="OrderList">
                  <div class="OrderListItem"  @click="toChildOrder(0)">
                      <van-icon name="pending-payment" size="1.5rem" color="#b1b1b1" :info="allPayNum.length"/>
                      <div>全部订单</div>
                  </div>
                <div class="OrderListItem"  @click="toChildOrder(1)">
                    <van-icon name="logistics" size="1.5rem" color="#b1b1b1" :info="notPayNum.length"/>
                    <div>未付款</div>
                </div>
                <div class="OrderListItem"  @click="toChildOrder(2)">
                    <van-icon name="replay" size="1.5rem" color="#b1b1b1" :info="payNum.length"/>
                    <div>已付款</div>
                </div>
            </div>
        </div>
        <div class="operationList" v-for="(val,index) in operationList" >
            <div class="operationItem" v-for="(v,k) in val" >
                <img class="operationImg" :src="v.img">
                <div class="operationContent">
                    <div class="operationText">{{v.text}}</div>
                    <van-icon name="arrow" size="1.5rem" color="#7a7a7a"/>
                </div>
            </div>
        </div>
        <div class="operationItemNormal margin-top bg-white padding" v-for="(v,k) in otherOperationList" >
            <img class="operationImg" :src="v.img">
            <div class="operationContent">
                <div class="operationText">{{v.text}}</div>
                <van-icon name="arrow" size="1.5rem" color="#7a7a7a"/>
            </div>
        </div>
        <transition enterActiveClass="zoomIn" leaveActiveClass="zoomOut" appear>
        <div class="login animated faster" v-if="isOpenLogin">
            <van-icon name="close" class="closeIcon" size="1.5rem" @click="isOpenLogin=false" color="white"/>
            <div class="loginTitle">
                <div>请使用账户登录/注册</div>
            </div>
            <div class="loginInput">
                    <div class="loginTag">
                        <div class="tagItem" @click="isLoginType=true" :class="{active:isLoginType}">登录</div>
                        <div class="tagItem " @click="isLoginType=false" :class="{active:!isLoginType}">注册</div>
                    </div>
                    <div class="inputItem border-bottom">
                        <van-icon name="contact" size="1.5rem" color="#ff6700"></van-icon>
                        <input  type="text"
                                placeholder="请输入用户名"
                                class="margin-left"
                                v-model="form.username"
                                v-validate="'required'"
                                name="name"
                                data-vv-as="用户名"
                                :class="{errBorder:errors.has('name')}"
                        />
                        <span class="error">{{ errors.first('name') }}</span>
                    </div>
                    <div class="inputItem border-bottom marginMax-top">
                    <van-icon name="lock" size="1.5rem" color="#ff6700"></van-icon>
                    <input
                            :type="type"
                            placeholder="请输入密码"
                            class="margin-left"
                            autocomplete="off"
                            name="password"
                            v-model="form.password"
                            v-validate="'required'"
                            data-vv-as="密码"
                            :class="{'is-danger': errors.has('password')}"
                            ref="password"
                    />
                    <span class="error">{{ errors.first('password') }}</span>
                    <van-icon :name="eyesIcon" size="1.5rem" color="#ff6700" @click="openEyes=!openEyes"></van-icon>
                   </div>
                    <transition leaveActiveClass="slideOutRight" enterActiveClass="slideInRight" appear>
                    <div  class="inputItem border-bottom marginMax-top animated faster" v-if="!isLoginType">
                    <van-icon name="replay" size="1.5rem" color="#ff6700"></van-icon>
                    <input
                            :type="type"
                            placeholder="请确认密码"
                            class="margin-left"
                            autocomplete="off"
                            v-validate="'required|confirmed:password'"
                            data-vv-as="确认密码"
                            data-vv-name="repassword"
                            :class="{'is-danger' :errors.has('repassword') }"
                            v-model="form.repassword"
                    />
                   <span v-show="errors.has('repassword')" class="error">{{ errors.first('repassword') }}</span>
                    </div>
                    </transition>
                    <van-button
                            class="confirmBtn"
                            v-if="isLoginType"
                            :disabled="(errors.has('password')||errors.has('name'))?true:false"
                            @click="loginBtn(true)"
                    >登录
                    </van-button>
                    <van-button
                            class="confirmBtn"
                            v-if="!isLoginType"
                            :disabled="(errors.has('password')||errors.has('name')||errors.has('repassword'))?true:false"
                            @click="loginBtn(false)"
                    >注册
                    </van-button>
            </div>
        </div>
        </transition>
    </div>
</template>
<script>
import {Icon,Tab, Tabs,Button,Toast,Dialog} from 'vant'
import  Vue from 'vue'
import {mapState} from 'vuex'
import {myApi} from '../utils/myApi'
import 'vant/lib/icon/style'
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'
import 'vant/lib/button/style'
import 'vant/lib/toast/style'
import 'vant/lib/dialog/style'
Vue.use(Icon).use(Tab).use(Tabs).use(Button).use(Toast)
export default{
    created(){
        this.$store.commit('render/IsHome',true)
        const isOpen=Boolean(this.$route.params.isOpenModal);
        this.isOpenLogin=isOpen;
    },
    mounted(){
        if(this.isLogin){
            this.$store.dispatch('userMs/getOrderNum',this.userId)
        }
    },
    data(){
        return {
            isOpenLogin: false,
            orderList: [{
                IconName: 'pending-payment',
                text: '全部订单',
                info:'',
            },
                {
                    IconName: 'logistics',
                    text: '未付款',
                    info:'',
                },
                {
                    IconName: 'replay',
                    text: '已付款',
                    info:'',
                }],
            operationList: [[
                {
                    img:'',
                    text:'会员中心'
                },
                {
                    img:'',
                    text:'我的优惠'
                }
            ],[
                {
                    img:'',
                    text:'服务中心'
                },
                {
                    img:'',
                    text:'小米之家'
                }
            ]],
            otherOperationList:[{
                img:'',
                text:'F码通道'
            },{
                img:'https://m.mi.com/static/img/i-setting.fb9625b3f2.png',
                text:'设置'
            }],
            openEyes:false,
            isLoginType:true,
            form:{
                username:'',
                password:'',
                repassword:'',
                ifPid:false,
            },
        }
    },
    methods:{
        logintranslate(index, title){

        },
        goOrder(){
            if(this.isLogin){
                this.$router.push('/myOrder')
            }else {
                Dialog.confirm({
                    message: '您尚未登录,\n是否登录查看',
                    confirmButtonText:'是',
                    confirmButtonColor:'#ff6700'
                }).then(() => {
                    this.isOpenLogin=true;
                }).catch(() => {

                })
            }

        },
        toChildOrder(index){
            if(this.isLogin){
                this.$router.push({path:'/myOrder',query:{index:index}})
            }else {
                Dialog.confirm({
                    message: '您尚未登录,\n是否登录查看',
                    confirmButtonText:'是',
                    confirmButtonColor:'#ff6700'
                }).then(() => {
                    this.isOpenLogin=true;
                }).catch(() => {

                })
            }

        },
        loginBtn(flag){
                const myform={
                    name:'',
                    password:""
                };
                myform.name=this.form.username;
                myform.password=this.form.password;
                if(flag){
                    this.$store.dispatch("userMs/login",myform).then((res)=>{
                        Toast.success('登录成功');
                        this.$store.dispatch("userMs/getShopCart");
                        this.isOpenLogin=false;
                    });
                }else {
                    this.$store.dispatch("userMs/register",myform).then(()=>{
                        Toast.success('注册成功');
                        this.$store.dispatch("userMs/getShopCart");
                        this.isOpenLogin=false;
                    });
                }
                if(this.$route.params.ToPid!==undefined){
                    const pid=+this.$route.params.ToPid;
                    let toast;
                    Toast.success({
                        duration: 800,
                        message: '登录成功'
                    });
                    const that=this;
                    const timer1=setTimeout(()=>{
                        toast=Toast.loading({
                            duration: 0,       // 持续展示 toast
                            forbidClick: true, // 禁用背景点击
                            loadingType: 'spinner',
                            message: '正在跳转'
                        });
                        clearTimeout(timer1);
                        that.$router.push({path:'/shopDetail',query:{pid:pid}})
                        toast.clear();
                    },800);
                }
        },
        logout(){
            this.$store.dispatch("userMs/logout");
           Toast.success('已退出登录')
        },
    },
    computed:{
        type(){
            if(this.openEyes){
                return 'text'
            }else {
               return 'password'
            }
        },
        eyesIcon(){
            if(this.openEyes){
                return 'eye-o'
            }else {
                return 'closed-eye'
            }
        },
        ...mapState("userMs",["isLogin","user",'userId','notPayNum','allPayNum','payNum']),
    },
    watch:{

    }
}
</script>
<style lang="scss" scoped>
.loginArea{
    height:84px;
    background: url("https://m.mi.com/static/img/bg.63c8e19851.png") center 0 #f37d0f;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    .loginAvatar{
        border-radius: 50%;
        background-color: #fe9f00;
    }
    .avatar{
        width: 50px;
        height: 50px;
        border: 1PX solid gainsboro;
        border-radius: 5px;
        text-align: center;
        font-size: 16px;
        line-height: 50px;
        color: white;
    }
    .logout{
        border-radius: 5px;
        background: transparent;
        color: white;
        border-color: white;
    }
    div{
        font-size: 14px;
        color: white;
        margin-left: 10px;
    }
}
    .orderArea{
        display: flex;
        flex-direction: column;
        .myOrder{
            display: flex;
            flex-direction: row;
            justify-content:space-between;
            align-items: center;
            height: 42px;
            font-size: 14px;
            padding: 0 15px;
            background-color: white;
            .RightTitle{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
        .OrderList{
            padding: 0 35px;
            height: 88px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            .OrderListItem{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                div{
                    margin: 5px 0;
                    font-size: 14px;
                }
            }
        }
    }
    .operationList{
        margin-top: 15px;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        background-color: white;
        .operationItem{
            position: relative;
              display: flex;
              flex-direction: row;
             justify-content: space-between;
            align-items: center;
            height: 54px;
            .operationImg{
                width: 25px;
                height: 25px;
            }
            .operationContent{
                width: 80%;
                display: flex;
                height: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
            }
        }
        .operationItem:last-child:after{
            width: 0;
        }
    }
.operationItemNormal{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    .operationImg{
        width: 25px;
        height: 25px;
    }
    .operationContent{
        width: 80%;
        display: flex;
        height: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
    }
}
.operationItem:last-child:after{
    width: 0;
}
.login{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: gainsboro;
    .closeIcon{
        position: fixed;
        top: 15px;
        right: 15px
    }
    .loginTitle{
        width: 100%;
        height: 200px;
        background-color: #ff6700;
        text-align: center;
        font-size: 16px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loginInput{
        width: 300px;
        height: 450px;
        background-color: white;
        position: absolute;
        top:150px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        justify-content: center;
        align-items: center;
        .loginTag{
            width: 80%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border: 1PX solid #ff6700;
            background-color: white;
            height: 35px;
            margin-bottom: 55px;
            border-radius: 5px;
            font-size: 16px;
            .tagItem{
                width: 50%;
                height: 100%;
                line-height: 35px;
                text-align: center;
                color: black;
                border-right:1PX solid #ff6700 ;
            }
            .tagItem:last-child{
                border: 0;
            }
            .active{
                background-color: #ff6700;
                color: white;
            }
        }
       .inputItem{
           display: flex;
           align-items: center;
           height: 35px;
           width: 90%;
           position: relative;
           input{
               outline: none;
               font-size: 16px;
               border: 0;
           }
           span{
              position: absolute;
               bottom: -20px;
               left: 35px;

           }
       }
        .confirmBtn{
            text-align: center;
            height: 35px;
            width: 80%;
            font-size: 16px;
            color: white;
            background-color: #ff6700;
            border-radius: 15px;
            line-height:35px ;
            margin-top: 45px;
        }
    }
}
    .operationItem:after{
        position: absolute;
        content: '';
        bottom: 0;
        height: 1PX;
        width: 290px;
        right: -15px;
        background-color: #e5e5e5;
    }
    .border-bottom{
        border-bottom: 1PX solid #e5e5e5;
    }
    .margin-top{
        margin-top: 15px;
    }
    .marginMax-top{
        margin-top: 35px;
    }
    .bg-white{
        background-color: white;
    }
    .padding{
        padding: 0 15px;
    }
    .margin-left{
        margin-left: 15px;
    }
.error{
    color: red;
}
</style>